<!-- 签到 -->
<template>
  <view class="sign-area">
    <view class="sign-top pos-r bg-base dflex dflex-flow-c">
      <view class="ft-white margin-top-sm fwb" style="font-size: 70rpx">
        {{ signData.coinCount }}
      </view>
      <view class="btn-line ft-black fs-xs border-radius-big" @click="to_detail()">紫币明细</view>
    </view>
    <view class="sign-content margin pos-a">
      <view class="bg-main border-radius padding">
        <view class="title">
          <view class="fwb fs">
            <text class="d">已累计签到</text>
            <text class="ft-base margin-left-sm fwb">{{ signData.signDays }}天</text>
          </view>
        </view>
        <view class="dflex-b margin-top">
          <view class="dflex-c dflex-flow-c" v-for="(item, index) in signData.signHis" :key="index">
            <view v-if="item.state" class="iconfont icon-yuanxingxuanzhongfill sign__active" />
            <view v-else class="iconfont icon-yuanxingweixuanzhong" />
            <view>{{ item.signWeek }}</view>
            <view class="fs-xs ft-dark">{{ item.coinNum }}币</view>
          </view>
        </view>
      </view>

      <view class="margin-top-xl">
        <view class="tac margin fs-xs">
          <text>连续签到{{ signData.signData?.sign_in_full || 7 }}天</text>
          <text class="margin-left-xs"
            >可额外获得{{ signData.signData?.sign_in_full_integral || '10' }}紫币</text
          >
        </view>

        <view class="w-full margin-top">
          <view class="dflex-b border-radius-big">
            <view class="tac padding-tb-sm flex1 bg-base" v-if="!signed" @click="toSign()">
              立即签到
            </view>
            <view class="tac padding-tb-sm flex1 bg-disabled" v-else>今日已签到</view>
          </view>
        </view>
      </view>
    </view>

    <view class="pos-f pos-bottom padding-sm tac w-full bg-warn fs-xs">
      紫币自获得日起，有效期一年，请及时使用！
    </view>
  </view>
</template>
<script setup lang="ts">
  import { ResultEnum } from '@/enums/httpEnum';
  import { getSignData, saveSignData } from '@/services/api/user/coin';
  import { SignModel } from '@/services/model/coinModel';
  import config from '@/utils/config';
  import { router } from '@/utils/router';
  import { Toast } from '@/utils/uniapi/prompt';
  import { onShow } from '@dcloudio/uni-app';
  import { reactive, ref } from 'vue';

  const signData = reactive<SignModel>({
    coinCount: 0,
    signDays: 0,
    signData: null,
    signHis: [],
  });
  const signed = ref(false);

  onShow(() => {
    loadData();
  });

  const loadData = () => {
    getSignData().then(({ data }) => {
      Object.assign(signData, data.data);
    });
  };

  const to_detail = () => {
    router.push(config.route.coin_list);
  };
  const toSign = () => {
    if (signed.value) {
      Toast('已签到，明天再来吧');
      return;
    }
    saveSignData().then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        Object.assign(signData, data.data);
        signed.value = true;
        Toast('恭喜签到成功');
      }
    });
  };
</script>
<style lang="scss" scoped>
  page {
    overflow: hidden;
    background-color: #f5f5f5;
  }

  .sign-area {
    .sign-top {
      left: -10%;
      width: 120%;
      height: 360rpx;
      padding: 0rpx 10%;
      border-bottom-right-radius: 50%;
      border-bottom-left-radius: 50%;

      .btn-line {
        padding: 10rpx 30rpx;
        border: 1px solid #333;
      }
    }

    .bg-disabled {
      background-color: #c0c4cd !important;
      color: #fff !important;
    }

    .sign-content {
      top: 240rpx;
      left: 0;
      right: 0;
      margin: 0 50rpx;

      .iconfont {
        color: #c0c4cd;
        font-size: 50rpx;
      }
    }
  }

  .sign__active {
    color: #ff6a6c !important;
  }
</style>
